{% extends 'base/base.html' %}
{% load app_extras %}
{% block title %}编辑 {{meta.title}}{% endblock %}
{% block extra-css %}
{{form.media.css}}
<style>
  .fa.fa-square.text-white {
    color: aliceblue;
  }
</style>
{% endblock %}
{% block content-header %}<h1>{{meta.verbose_name}} <small> 编辑{{meta.verbose_name}}</small></h1>{% endblock %}
{% block main-content %}
<div class="box box-warning">
  <div class="box-header with-border">
    <h3 class="box-title"> 编辑{{meta.verbose_name}}</h3>
    <div class="box-tools pull-right">
      <div class="btn-group margin-r-5">
        <button type="button" class="btn btn-default btn-sm" onclick="window.history.go(-1)">
          <i class="fa fa-arrow-circle-o-left"></i><span> 返回上一页</span>
        </button>
      </div>
      {%if 'mark' in form.fields%}
      <button type="button" data-complete-text="已共享" data-toggle="buttons" id="to_shared"
        class="btn btn-{%if object.mark == 'shared'%}success{%else%}info{%endif%} btn-sm hidden-xs">
        {{object.get_mark_display}}
      </button>
      {%endif%}
    </div>
  </div>
  {%block form%}
  <form action="" method="POST" class="form-horizontal" id="{{meta.model_name}}-new">
    {% csrf_token %}

    {% if form.non_field_errors %}
    {% for error in form.non_field_errors %}
    <p class="text-red">
      {{ error }}
    </p>
    {% endfor %}
    {% endif %}

    {% for hidden in form.hidden_fields %}
    {{ hidden }}
    {% endfor %}
    <div class="box-body">
      {% for field in form.visible_fields %}
      <div class="form-group">
        <label class="col-sm-2 control-label">{{ field.label }}:</label>
        <div class="col-sm-5">
          {{ field }}
        </div>
        <div class="col-sm-5 help-block">
          {%if field.field.required%}
          <span class="text-red">必填</span>
          {%else%}
          <span class="text-muted">选填</span>
          {%endif%}
          {{ field.help_text|safe}}
          <div class="text-red">{{ field.errors|safe }}</div>
        </div>
      </div>
      {% endfor %}
    </div>
    <div class="box-footer">
      <button type="button" class="btn btn-default btn-sm margin-r-5" onclick="window.history.go(-1)">
        <span> 取消并返回</span>
      </button>
      <div class="btn-group pull-right">
        <button type="submit" name="_addanother" class="btn btn-primary btn-sm margin-r-5">保存并新增</button>
        <button type="submit" name="_saverview" class="btn btn-primary btn-sm margin-r-5">保存并查看</button>
        <button type="submit" name="_saverlist" class="btn btn-primary btn-sm">保存返回列表</button>
      </div>
    </div>
  </form>
  {%endblock form%}
  {% block page-extra %}
  {% endblock page-extra %}
</div>
{% endblock %}
{% block extra-js %}
{{form.media.js}}
<script>
  $(document).ready(function () {
    // reset modal cache
    $('body').on('hidden.bs.modal', '.modal', function () {
      $(this).removeData('bs.modal');
    });

    // S Select2
    $("select").select2({ language: "zh-CN" });

    // Select2 color
    function formatState(state) {
      if (!state.id) {
        return state.text;
      }

      var $state = $(
        '<span><i class="fa fa-square" /></i> <span></span></span>'
      );

      // Use .text() instead of HTML string concatenation to avoid script injection issues
      $state.find("span").text(" " + state.text);
      // <i class="fa fa-square text-orange"></i>
      $state.find("i").addClass("text-" + state.element.value.toLowerCase());
      return $state;
    };

    var ColorSelect = $('select#id_color');
    if (ColorSelect.length != 0) {
      ColorSelect.select2({
        templateSelection: formatState,
        language: "zh-CN"
      });
    }
    // E Select2

    // Make shared
    var Shared = $("#to_shared");
    if (Shared.length != 0) {
      $("#to_shared").click(function () {
        $(this).button('toggle').delay(100).queue(function () {
          if ($(this).hasClass('btn-info')) {
            $(this).addClass('btn-success').removeClass('btn-info');
            $("#id_mark").val('shared');
            $(this).button('complete');
            $(this).dequeue();
          } else if ($(this).hasClass('btn-success')) {
            $(this).addClass('btn-info').removeClass('btn-success');
            $("#id_mark").val('');
            $(this).button('complete');
            $(this).button('reset').delay(100).dequeue();
          }
        });
      });
    }

    var oldFormData = $('form').serialize();
    $("form").submit(function () {
      var newFormData = $('form').serialize();
      if (oldFormData == newFormData) {
        alert("没有任何改变,已经阻止表单提交.");
        return false;
      }
    });

    //DateTimeField
    var DateTimeField = $("input[data-datetime='true']");
    if (DateTimeField.length != 0) {
      DateTimeField.daterangepicker({
        // timePicker: true,
        // timePickerIncrement: 5,
        // timePicker24Hour: true,
        locale: {
          format: 'YYYY-MM-DD H:mm:ss',
          applyLabel: '确认',
          cancelLabel: '取消',
          fromLabel: '从',
          toLabel: '到',
          weekLabel: 'W',
          customRangeLabel: '选择时间',
          daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
          monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        },
        singleDatePicker: true
      });
    }

    //DateField
    var DateField = $("input[data-date='true']");
    if (DateField.length != 0) {
      DateField.daterangepicker({
        locale: {
          format: 'YYYY-MM-DD',
          applyLabel: '确认',
          cancelLabel: '清除',
          fromLabel: '从',
          toLabel: '到',
          weekLabel: 'W',
          customRangeLabel: '选择时间',
          daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
          monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        },
        autoUpdateInput: false,
        singleDatePicker: true
      });

      DateField.on('apply.daterangepicker', function (ev, picker) {
        $(this).val(picker.startDate.format('YYYY-MM-DD'));
      });

      DateField.on('cancel.daterangepicker', function (ev, picker) {
        $(this).val('');
      });
    }

  });
</script>

{% block SubScript %}
{% endblock SubScript %}
{% endblock %}